<script setup>
import { ref, onMounted } from 'vue'
import WelfareTable from './WelfareTable.vue'
import WelfarePeTable from './WelfarePeTable.vue'
import WelfareDetailsModal from './WelfareDetailsModal.vue'
import {
  queryWelfareDutyList,
  queryWelfareFileList,
  downLoadWelfareFile,
  previewWelfareFile,
  downloadWelfareTable
} from '@/api/home'
import { downloadFile } from '@/utils/file'
import { message as AMessage } from 'ant-design-vue'

const props = defineProps({
  policyInfo: {
    type: Object
  }
})
const activeKey = ref('')

const tabsList = ref([])
async function getTabs() {
  let res = null
  const data = {
    grpPlanCode: props.policyInfo.grpPlanCode
  }
  try {
    res = await queryWelfareDutyList(data)
  } catch (err) {
    console.log('err', err)
  }
  if (res?.isSuccess) {
    tabsList.value = res.data
    activeKey.value = res.data[0].dutyType
  }
}
const pdfList = ref([])
async function getPdfList() {
  let res = null
  const data = {
    grpPlanCode: props.policyInfo.grpPlanCode,
    grpContNo: props.policyInfo.grpContNo
  }
  try {
    res = await queryWelfareFileList(data)
  } catch (err) {
    console.log('err', err)
  }
  if (res?.isSuccess) {
    res.data.forEach((file) => (file.loading = false))
    pdfList.value = res.data
  }
}
async function downloadPdf(file) {
  if (file.loading) return
  file.loading = true
  if (file.fileId) {
    const params = {
      fileId: file.fileId
    }
    let res = null
    try {
      res = await previewWelfareFile(params)
    } catch (err) {
      console.log('err', err)
    } finally {
      file.loading = false
    }
    if (res?.isSuccess) {
      window.open(res.data)
    }
  } else {
    const params = {
      fileUrl: file.fileUrl
    }
    let res = null
    try {
      res = await downLoadWelfareFile(params)
    } catch (err) {
      console.log('err', err)
    } finally {
      file.loading = false
    }
    if (res) {
      downloadFile(res)
      AMessage.success('下载成功')
    }
  }
}
onMounted(() => {
  getTabs()
  getPdfList()
})
// 导出表格
let exportLoading = ref(false)
async function exportTable() {
  const data = {
    insuredId: props.policyInfo.insuredId,
    grpPlanCode: props.policyInfo.grpPlanCode,
    customId: props.policyInfo.customer_id,
    contYear: props.policyInfo.policyYear,
    employeeId: props.policyInfo.member_id,
    startDate: props.policyInfo.insuredEffectiveDate,
    endDate: props.policyInfo.insuredExpireDate,
    age: props.policyInfo.age
  }
  exportLoading.value = true
  let res = null
  try {
    res = await downloadWelfareTable(data)
  } catch (err) {
    console.log('err', err)
  } finally {
    exportLoading.value = false
  }
  if (res) {
    downloadFile(res)
    AMessage.success('下载成功')
  }
}
// detail modal
const welfareDetailVisible = ref(false)
const peDetailInfo = ref({})
function openDetailModal(info) {
  peDetailInfo.value = { ...info, insuredId: props.policyInfo.customer_id }
  welfareDetailVisible.value = true
}
function getPopupContainer(triggerNode) {
  return triggerNode.parentNode.parentNode
}
</script>
<template>
  <div class="welfare-info" id="welfareInfo">
    <div class="welfare-info-header">
      <span class="welfare-info-header-name">{{ $t('home.welfare.BenefitInformation') }}</span>
      <svg-icon size="14" name="knock" />
      <span class="welfare-info-header-tip">{{ $t('home.welfare.Realtime') }}</span>
    </div>

    <a-flex class="welfare-info-form" wrap="wrap" gap="20">
      <a-button type="primary" class="export-btn" :loading="exportLoading" @click="exportTable">{{
        $t('home.welfare.Export')
      }}</a-button>

      <div class="pdf-zh" @click="downloadPdf(file)" v-for="(file, index) in pdfList" :key="index">
        <span class="flex-wrap-center ellipsis">
          <svg-icon class="pdf-icon-left" size="18" name="file" />
          <a-tooltip :getPopupContainer="getPopupContainer">
            <template #title>
              <div>{{ file.fileName }}</div>
            </template>
            <span class="text-decoration ellipsis"> {{ file.fileName }}</span>
          </a-tooltip>
        </span>
        <a-spin :spinning="file.loading">
          <svg-icon size="16" class="pdf-icon-download" name="pdf-download" />
        </a-spin>
      </div>
    </a-flex>
    <a-tabs v-model:activeKey="activeKey" class="welfare-tabs">
      <a-tab-pane v-for="tab in tabsList" :key="tab.dutyType" :tab="tab.dutyName">
        <WelfarePeTable
          v-if="tab.dutyType == 'PE'"
          :policyInfo="policyInfo"
          :dutyType="tab.dutyType"
          @openDetailModal="openDetailModal"
        ></WelfarePeTable>
        <WelfareTable
          v-else
          :key="tab.dutyType"
          :policyInfo="policyInfo"
          :dutyType="tab.dutyType"
          @openDetailModal="openDetailModal"
        ></WelfareTable>
      </a-tab-pane>
    </a-tabs>
    <WelfareDetailsModal
      v-if="welfareDetailVisible"
      :peDetailInfo="peDetailInfo"
      @updateVisible="(visible) => (welfareDetailVisible = visible)"
    ></WelfareDetailsModal>
  </div>
</template>
<style lang="scss">
.welfare-tabs {
  .ant-tabs-content-holder {
    width: 100%;
  }
  .ant-tabs-tab {
    color: #999999;
    font-size: 16px;
    padding: 16px 0;
    display: flex;
    justify-content: center;
  }
  .ant-tabs-tab + .ant-tabs-tab {
    margin-left: 50px;
  }
  .ant-tabs-ink-bar {
    background-color: #4d789c !important;
  }
  .ant-tabs-tab-active {
    .ant-tabs-tab-btn {
      color: #4d789c !important;
      text-align: center;
    }
  }
}
</style>
<style lang="scss" scoped>
.welfare-info {
  margin-top: 15px;
  background: #ffffff;
  box-shadow: 0px 0px 6px 0px rgba(0, 58, 84, 0.08);
  border-radius: 10px;
  padding: 20px 24px;
  &-header {
    display: flex;
    align-items: center;
    .svg-icon {
      margin: 0 10px;
    }
    &-name {
      font-weight: bold;
      font-size: 16px;
      color: $color-text-primary;
    }
    &-tip {
      font-size: 14px;
      color: #cf595d;
      font-weight: bold;
    }
  }
  &-form {
    margin-top: 20px;
    margin-bottom: 15px;
    .export-btn {
      background: #e8f0f3;
      border: 1px solid #4d789c;
      color: #4d789c;
      cursor: pointer;
    }
    .export-btn:hover {
      color: #97b7c5;
      border: 1px solid #97b7c5;
    }
    .pdf-zh {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 240px;
      height: 36px;
      padding: 0 10px;
      background: #f4f4f4;
      border-radius: 4px;
      font-size: 14px;
      color: #666666;
      position: relative;

      .flex-wrap-center {
        flex: 1;
        .text-decoration {
          flex: 1;
          cursor: pointer;
        }
      }
    }
    .text-decoration {
      text-decoration: underline;
    }
    .pdf-icon-left {
      margin-right: 10px;
    }
    .pdf-icon-download {
      cursor: pointer;
    }
  }
}
</style>
